<template>
	<view>
	
		<view style="padding-top:260rpx;">
			
			<view style="height:80px;">
				<view class="UserName-input" :class="{active:distinguish.Phone==true}">
					<input type="text" placeholder="请输入您的手机号码" placeholder-style="color:#565656;text-align: center;" v-model="From.UserName"/>
					<view class="obtain" @click="countdown">{{time}}</view>
				</view>
				
			</view>
			
			<view style="height:90px;">
			<view class="login-input" :class="{active:distinguish.UserName==true}">
				<input @click="pwdTip()" type="password" placeholder="您的密码" placeholder-style="color:#565656;text-align: center;"v-model="From.PassWord"/>
			</view>
			<text class="tips" v-if="PassWordtips">{{PassWordtips}}</text>
			<view class="passwordTip" v-show="isSeepwd"><text>密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符</text></view>
			
			
			</view>
			<view style="height:80px;">
			<view class="login-input" :class="{active:distinguish.PassWord==true}">
				<input type="password" placeholder="再次输入密码" placeholder-style="color:#565656;text-align: center;" v-model="From.passWord1"/>
			</view>
			
			</view>
		</view>
		<view class="login-button">
			<button @click="register">点击注册</button>
		</view>
	   <!-- <view v-for="item in User1">
			<text>{{item.UserName}}</text>
			
		</view> -->
	</view>
</template>

<script>
 const userData =require('@/Data/UserData.json');
	export default {
		data(){
			return {
				From:{
					UserName:'',
					PassWord:'',
					passWord1:'',
				},
				userCollerction:null,
				distinguish:{
					Phone:false,
					PassWord:false
				},
				Phonetips:'',
				UserNametips:'',
				PassWordtips:'',
				time:'点击获取',
			    isSeepwd:false,
				User1:[],
				
			}
		},
		
		onLoad(){
			this.toUser()
		},
		
		
		methods:{
			toUser(){
				console.log(userData);
				this.User1=userData;
				console.log(this.User1);
				
			},
			pwdTip(){
				this.isSeepwd=!this.isEmpower;
				
			},
			
			countdown(){
				var that = this
				that.time = 60
				if(that.time>0){
				 var interval = setInterval(function(){
					that.time--
					if(that.time == 0){
						clearInterval(interval)
						that.time = "重新获取"
					}
				   },1000)  
				}
			},
			register(){
				var Phone = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
				//用户名正则，4到16位（字母，数字，下划线，减号）
				//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
				var PassWord = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
				//验证电话
				if(this.From.Phone){
					if(!Phone.test(this.From.Phone)){
						this.Phonetips = '手机号格式错误'	
					}else{
						this.distinguish.Phone = false
						this.Phonetips = ""
					}
				}else{
					this.distinguish.Phone = true
					this.Phonetips = '手机号不能为空'
				}
				
				// 验证密码
				if(this.From.PassWord){	
					if(!PassWord.test(this.From.PassWord)){
						this.PassWordtips = '密码格式错误'
					}else{
						this.distinguish.PassWord = false
						this.PassWordtips = ""
					}
				}else{
					this.distinguish.PassWord = true
					this.PassWordtips = '密码不能为空'
				}
// 存入From    
                 
                 this.User1.push(this.From);
                 uni.setStorageSync('user',this.User1);
				
				  uni.reLaunch({
				   					url:'../login/index',
				   				
				  });
				  
			  }
	         
				
			},
			Switch(){
				this.SwiTch = !this.SwiTch
				 
			}
		}
	
</script>

<style lang="less">
	input:focus { outline: none; }
	/* 背景图设置 */
	page{
		width:100%;
		height:100%;
	
		}
	.login-input{
		width:70%;
		height:63px;
		margin:0px auto;
		display: flex;
		 input{
			width:100%;
			border:2px solid rgb(40, 40, 40);
			border-radius: 20px;
			height:40px;
			color: rgb(30, 30, 30);
			padding:0 5px;
			font-size:14px;
			margin-top:25px;
			outline: none;
			-webkit-appearance: none; /*去除系统默认的样式*/
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
		}
	}
	.UserName-input{
		width:70%;
		height:63px;
		margin:0px auto;
		 input{
		width:95%;
		border:2px solid rgb(40, 40, 40);
		border-radius: 20px;
		height:40px;
		color: rgb(30, 30, 30);
		padding:0 5px;
		font-size:14px;
		margin-top:25px;
		outline: none;
		-webkit-appearance: none; /*去除系统默认的样式*/
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/
		}
	}
	.login-button{
		width:70%;
		margin:0px auto;
		button{
			width:100%;
			font-size:15px;
			height:40px;
			color: rgb(255,255,255);
			border: 2px solid rag(40,40,40);
			border-radius: 20px;
			margin-top:17px;
	        background-color: rgb(170, 85, 255);
		}
	}
	.tips{
		transform: translate(0px,-20px);
	   	color:rgb(245,8,8);
		font-size:12px;
		display: initial;
		float: right;
		padding-right:30px;
	}
	.passwordTip{
		margin: 10px auto;
		width: 70%;
		font-size: 10px;
		color: #808080;
		text-align: center;
	}
</style>
